<template>
  <a-form
    ref="formRef"
    name="dynamic_form_nest_item"
    :model="dynamicValidateForm"
    :disabled="view"
  >
    <div
      v-for="(userGroup, groupIndex) in dynamicValidateForm.users"
      :key="userGroup.id"
    >
      <a-form-item
        label="属性标题"
        style="width: 260px"
        :name="['users', groupIndex, 'label']"
        :rules="rules"
      >
        <a-input v-model:value="userGroup.label" placeholder="Title" />
      </a-form-item>
      <div
        v-for="(user, userIndex) in userGroup.children"
        :key="user.id"
        class="flex items-baseline"
      >
        <el-row>
          <el-col :span="6"
            ><a-form-item
              label="属性名称"
              :name="['users', groupIndex, 'children', userIndex, 'label']"
              :rules="rules"
            >
              <a-input
                v-model:value="user.label"
                placeholder="Name"
              /> </a-form-item
          ></el-col>
          <el-col :span="6">
            <a-form-item
              label="属性名值"
              :name="['users', groupIndex, 'children', userIndex, 'value']"
              :rules="rules"
              class="ml-20px"
            >
              <a-input v-model:value="user.value" placeholder="Value" />
            </a-form-item>
          </el-col>
          <el-col :span="4">
            <MinusCircleOutlined
              v-if="!view"
              @click="removeUser(groupIndex, userIndex)"
              style="margin-left: 26px"
          /></el-col>
        </el-row>
      </div>
      <a-form-item style="width: 180px; margin-left: 80px">
        <a-button type="dashed" block @click="addUser(groupIndex)">
          <PlusOutlined />
          新增项
        </a-button>
      </a-form-item>
      <a-form-item>
        <a-button type="dashed" block @click="removeUserGroup(groupIndex)">
          <MinusCircleOutlined /> 删除组
        </a-button>
      </a-form-item>
    </div>
    <a-form-item>
      <a-button type="dashed" block @click="addUserGroup">
        <PlusOutlined />
        新增组
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { reactive, ref, defineProps } from "vue";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons-vue";

const emit = defineEmits(["removeItem", "removeGroup"]);

const props = defineProps({
  list: {
    type: Array,
    default() {
      return [];
    },
  },
  view: {
    type: Boolean,
    default: false,
  },
});

const formRef = ref(null);

const dynamicValidateForm = reactive({
  users: [
    // {
    //   title: '标题 1',
    //   id: Date.now(),
    //   list: [
    //     {
    //       name: '属性 1',
    //       value: '属性值',
    //       id: Date.now(),
    //     },
    //   ],
    // },
  ],
});
//监听props.list 只要有变化就赋值
watch(
  () => props.list,
  (val) => {
    dynamicValidateForm.users = val;
  }
);

// dynamicValidateForm.users = props.list;

const rules = [
  {
    required: true,
    message: "不能为空",
  },
  {
    // min: 4,
    max: 100,
    message: "最大100位字符",
  },
];

const removeUser = (groupIndex, userIndex) => {
  emit(
    "removeItem",
    dynamicValidateForm.users[groupIndex].children[userIndex].id
  );
  dynamicValidateForm.users[groupIndex].children.splice(userIndex, 1);
};

const addUser = (groupIndex) => {
  dynamicValidateForm.users[groupIndex].children.push({
    label: "",
    value: "",
  });
};

const removeUserGroup = (groupIndex) => {
  emit("removeGroup", dynamicValidateForm.users[groupIndex].id);
  dynamicValidateForm.users.splice(groupIndex, 1);
};

const addUserGroup = () => {
  dynamicValidateForm.users.push({
    label: "标题 1",
    children: [
      {
        label: "属性 1",
        value: "",
      },
    ],
  });
};

const verificationOk = async () => {
  const info = await formRef.value.validate();
  console.log(info);
  return info.users;
};

defineExpose({
  verificationOk,
});
</script>
